<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'

import InnerDialog from '/@/views/analysis/card/components/InnerDialog.vue' 
import TabsInner from './TabsInner.vue';

const activeName = ref(1)
const innerDialogVisible = ref(false)
const state = reactive({
    tableData: [
		{
			id: 1,
            storeName: '雁塔店',
			cardItemName: '测试',
			property: '属性名称',
			spec: '规格',
			salesVolume: '销量',
			cellPrice: '销售价格',
			cellRatio: '销售占比',
			averagePeple: '人平均',
			price: '客单价',
			repurchaseCycle: '复购周期',
			serviceGoodRatio: '服务好评率',
			sexRatio: '男女比例',
			age: '年龄'
		}
	] as Array<any>,
    rowId: 0
})

const pageNation = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0
})

const props = withDefaults(defineProps<{
    id: number,
    modelValue: boolean,
    statistics: number
	title: string
}>(), {
    statistics: 1,
	title: ''
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const handleClick = (name: number) => {
    console.log(name);
	
}

/**
 * 分页函数
 */
const handleSizeChange = () => {}
const handleCurrentChange = () => {}

</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" :title="`${props.title}详情`" @close="closeDialog" style="width: 1400px;" center>
            <el-table :data="state.tableData" border style="width: 100%" v-show="props.statistics === 1">
				<el-table-column label="会员ID" prop="storeName" />
				<el-table-column label="开卡门店" prop="cardItemName" />
				<el-table-column label="会员名" prop="property" />
				<el-table-column label="性别" prop="spec" /> 
				<el-table-column label="年龄" prop="spec" /> 
				<el-table-column label="客户等级" prop="spec" /> 
				<el-table-column label="总消费金额" prop="spec" /> 
				<el-table-column label="总负债金额" prop="spec" /> 
				<el-table-column label="负债率" prop="spec" /> 
				<el-table-column label="家居负债" prop="spec" /> 
				<el-table-column label="卡项负债" prop="spec" /> 
				<el-table-column label="充值负债" prop="spec" />  
			</el-table>

			<el-table :data="state.tableData" border style="width: 100%" v-show="props.statistics === 2">
				<el-table-column label="会员ID" prop="storeName" />
				<el-table-column label="开卡门店" prop="cardItemName" />
				<el-table-column label="会员名" prop="property" />
				<el-table-column label="性别" prop="spec" /> 
				<el-table-column label="年龄" prop="spec" /> 
				<el-table-column label="客户等级" prop="spec" /> 
				<el-table-column label="成本" prop="spec" /> 
				<el-table-column label="负债金额" prop="spec" /> 
				<el-table-column label="寄存数量" prop="spec" /> 
			</el-table>

			<el-table :data="state.tableData" border style="width: 100%" v-show="props.statistics === 3">
				<el-table-column label="会员ID" prop="storeName" />
				<el-table-column label="开卡门店" prop="cardItemName" />
				<el-table-column label="会员名" prop="property" />
				<el-table-column label="性别" prop="spec" /> 
				<el-table-column label="年龄" prop="spec" /> 
				<el-table-column label="客户等级" prop="spec" /> 
				<el-table-column label="负债金额" prop="spec" /> 
				<el-table-column label="所需产品数量" prop="spec" /> 
				<el-table-column label="总体成本" prop="spec" /> 
				<el-table-column label="产品成本" prop="spec" /> 
				<el-table-column label="手工成本" prop="spec" /> 
				<el-table-column label="消耗提成成本" prop="spec" />  
			</el-table>

			<el-table :data="state.tableData" border style="width: 100%" v-show="props.statistics === 4">
				<el-table-column label="会员ID" prop="storeName" />
				<el-table-column label="开卡门店" prop="cardItemName" />
				<el-table-column label="会员名" prop="property" />
				<el-table-column label="性别" prop="spec" /> 
				<el-table-column label="年龄" prop="spec" /> 
				<el-table-column label="客户等级" prop="spec" /> 
				<el-table-column label="赠送负债金额" prop="spec" /> 
				<el-table-column label="本金负债金额" prop="spec" /> 
				<el-table-column label="已消耗赠送金额" prop="spec" /> 
				<el-table-column label="赠送金额" prop="spec" /> 
				<el-table-column label="已耗卡金额" prop="spec" /> 
				<el-table-column label="充值金额" prop="spec" /> 
			</el-table>

			<el-table :data="state.tableData" border style="width: 100%" v-show="props.statistics === 5">
				<el-table-column label="会员ID" prop="storeName" />
				<el-table-column label="开卡门店" prop="cardItemName" />
				<el-table-column label="会员名" prop="property" />
				<el-table-column label="性别" prop="spec" /> 
				<el-table-column label="年龄" prop="spec" /> 
				<el-table-column label="客户等级" prop="spec" /> 
				<el-table-column label="已发放代金券数量" prop="spec" /> 
				<el-table-column label="已发放代金券金额" prop="spec" /> 
				<el-table-column label="待到帐代金券数量" prop="spec" /> 
				<el-table-column label="待到帐代金券金额" prop="spec" /> 
				<el-table-column label="未使用代金券数量" prop="spec" /> 
				<el-table-column label="未使用代金券金额" prop="spec" /> 
				<el-table-column label="总计代金券负债数量" prop="spec" /> 
				<el-table-column label="总计代金券负债金额" prop="spec" /> 
			</el-table>

			<section v-show="props.statistics === 6">
				<el-tabs
					v-model="activeName"
					type="card"
					class="demo-tabs"
					@tab-click="handleClick"
				>
					<el-tab-pane label="家居负债" :name="1">
						<TabsInner :tabs-index="activeName" />
					</el-tab-pane>
					<el-tab-pane label="卡项负债" :name="2">
						<TabsInner :tabs-index="activeName" />
					</el-tab-pane>
					<el-tab-pane label="充值负债" :name="3">
						<TabsInner :tabs-index="activeName" />
					</el-tab-pane>
					<el-tab-pane label="代金券负债" :name="4">
						<TabsInner :tabs-index="activeName" />
					</el-tab-pane>
				</el-tabs>
			</section>

            <section class="mt15">
				<el-row justify="end">
					<el-col :span="24" class="flex-end-center">
						<el-pagination v-model:current-page="pageNation.pageNum" v-model:page-size="pageNation.pageSize"
						:page-sizes="[10, 20, 30]" :background="true"
						layout="total, sizes, prev, pager, next, jumper" :total="pageNation.total"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</el-col>
				</el-row> 
			</section>
        </el-dialog>

        <InnerDialog v-model="innerDialogVisible" :id="state.rowId" />
    </main>
</template>

<style lang='scss' scoped>

</style>